<template>
  <div class="tp-org-items">
    <div :style="{height: style.vspace+'px',position:'relative'}">
      <svg class="tp-org-items--lines" xmlns="http://www.w3.org/2000/svg" version="1.1" :height="style.vspace+'px'">
        <path class='dv' :d="dv" :stroke="style.strokeColor" :stroke-width="style.strokeWidth" fill="none" />
        <path v-show="isUnfold" class='d' :d="d" :stroke="style.strokeColor" :stroke-width="style.strokeWidth" fill="none" />
        <path v-show="isUnfold" class='d-radius' :d="dRadius" :stroke="style.strokeColor" :stroke-width="style.strokeWidth" fill="none" />
        <path v-show="isUnfold" class='dos' v-for="(d,i) in dos" :key="i" :d="d" :stroke="style.strokeColor" :stroke-width="style.strokeWidth" fill="none" />
      </svg>
      <div class="tp-org-items--shrinkage-button" :style="{color: style.strokeColor}" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <tp-org-icon class="icon" v-show="showBtn || !isUnfold" @click.native="btnClick" :icon="isUnfold ? 'tp-icon-error' : 'tp-icon-add-circle'" :color="style.strokeColor"></tp-org-icon>
      </div>
    </div>
    <tp-org-row v-show="isUnfold">
      <tp-org-col :span="data[top.propsKey.children].length / 24" v-for="child in data[top.propsKey.children]" :key="child[top.propsKey.value] || child[top.propsKey.label]">
        <tp-org-box :data="child" :parent="data"></tp-org-box>
        <tp-org-items v-if="child[top.propsKey.children] && child[top.propsKey.children].length" :data="child" :width="width / data[top.propsKey.children].length"></tp-org-items>
      </tp-org-col>
    </tp-org-row>
  </div>
</template>

<script>
import TpOrgRow from '../row-col/Row';
import TpOrgCol from '../row-col/Col';
import TpOrgBox from './Box';
import TpOrgIcon from '../icon/Icon';
export default {
  name: 'TpOrgItems',
  components: { TpOrgRow, TpOrgCol, TpOrgBox, TpOrgIcon },
  inject: ["style", 'top'],
  props: {
    data: {
      type: Object,
      required: true
    },
    width: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      len: this.data[this.top.propsKey.children].length,
      perWidth: this.width / this.data[this.top.propsKey.children].length / 2,
      dv: '',
      d: '',
      dRadius: '',
      dos: [],
      showBtn: false,       //显示展开/关闭按钮
      isUnfold: true        //展开状态
    }
  },
  watch: {
    data: {
      handler(v) {
        this.computedPath();
        this.top.toRefresh();
      },
      deep: true
    },
    'top.refresh': {
      handler() {
        this.computedPath();
      }
    }
  },
  created() {
    this.computedPath();
  },
  methods: {
    computedPath() {
      this.len = this.data[this.top.propsKey.children].length;
      this.perWidth = this.width / this.len / 2;
      if (this.len > 1) {
        this.dv = `M ${this.width / 2} 0 l 0 ${this.style.vspace / 2}`;
        this.d = `M ${this.perWidth + this.style.strokeRadius} ${this.style.vspace / 2} L ${this.width - this.perWidth - this.style.strokeRadius} ${this.style.vspace / 2} 
                  M ${this.perWidth} ${this.style.vspace / 2 + this.style.strokeRadius} L ${this.perWidth} ${this.style.vspace} 
                  M ${this.width - this.perWidth} ${this.style.vspace / 2 + this.style.strokeRadius} L ${this.width - this.perWidth} ${this.style.vspace}`;

        this.dRadius = `M ${this.perWidth} ${this.style.vspace / 2 + this.style.strokeRadius} Q ${this.perWidth} ${this.style.vspace / 2} ${this.perWidth + this.style.strokeRadius} ${this.style.vspace / 2} 
                      M ${this.width - this.perWidth} ${this.style.vspace / 2 + this.style.strokeRadius} Q ${this.width - this.perWidth} ${this.style.vspace / 2} ${this.width -this.perWidth - this.style.strokeRadius} ${this.style.vspace / 2}`;
      } else {
        this.d = `M ${this.width / 2} 0 l 0 ${this.style.vspace}`;
        this.dRadius = '';
      }
      this.dos = [];
      for (let i = 1, j = 3; i < this.len - 1; i++, j+=2) {
        this.dos.push(`M ${this.perWidth * j} ${this.style.vspace / 2} L ${this.perWidth * j} ${this.style.vspace}`);
      }
    },
    mouseOver() {
      this.showBtn = true;
    },
    mouseLeave() {
      this.showBtn = false;
    },
    btnClick() {
      this.isUnfold = !this.isUnfold;
    }
  }
}
</script>